<template>
    <div class="myborder sciencecenter">
        <el-row class="righttop">
            <el-col class="righttopbody" :span="8">
                <el-row class="righttopbody-1">
                    <el-col :span="10">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/zhucerenshu.svg"
                            alt="">

                    </el-col>
                    <el-col :span="14" class="righttoptext">
                        <div class="text-1">团队数量</div>
                        <div class="text-2 ">
                            <MynumberVue class="colora" :num="5"></MynumberVue>
                            <span class="texta">团队</span>

                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="righttopbody" :span="8">
                <el-row class="righttopbody-1">
                    <el-col :span="10" class="righttopbody-img">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/denglurenshu.svg"
                            alt="">

                    </el-col>
                    <el-col :span="14" class="righttoptext">
                        <div class="text-1">注册人数</div>
                        <div class="text-2 ">
                            <MynumberVue class="colorb" :num="num1"></MynumberVue>
                            <span class="texta">人</span>

                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="righttopbody" :span="8">
                <el-row class="righttopbody-1">
                    <el-col :span="10" class="righttopbody-img">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/pingcerenshu.svg"
                            alt="">
                    </el-col>
                    <el-col :span="14" class="righttoptext">
                        <div class="text-1">测评次数</div>
                        <div class="text-2 ">
                            <MynumberVue class="colorc" :num="num2"></MynumberVue>
                            <span class="texta">次</span>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <Myheader :src="src" data="学校排行" :change="change" placeholder="请输入学校名称"></Myheader>
        <div class="right-table">
            <Table1 :centerref="centerref"
                :data="char7.filter(e => name1 ? e.teamhome?.filter(e => e.school?.includes(name1)).length : true)">
            </Table1>
        </div>
        <Myheader :style="{ marginTop: '24px' }" :src="src2" data="优秀学员" placeholder="请输入学员名称" :change="change2">
        </Myheader>
        <div class="right-table">
            <Table2 :centerref="centerref" :data="_char8" :chat="chat">
            </Table2>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import MynumberVue from "../../components/animejs/mynumber.vue";
import Studycodemodel from '../../mysql_interface/studycodemodel';
import Myheader from './myheader.vue';
import Table1 from './table/table1.vue';
import Table2 from './table/table2.vue';
const src = 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_tuanduipaihang.png'
const src2 = 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_youxiuxuesheng.png'


const p = defineProps<{ char7: Studycodemodel.Iteam[], char8: Studycodemodel.Iuser[], centerref: any, num1: number, num3: number, num2: number, chat: string }>()
const name1 = ref('')
const name2 = ref('')
const change = (t: string) => {
    console.log(t)
    name1.value = t
}
const change2 = (f: string) => {
    name2.value = f
}

const _char8 = computed(() => {
    if (name2.value) {
        return p.char8.filter(c => {
            return c.name?.includes(name2.value) || c.teamname?.includes(name2.value)
        })
    }
    return p.char8
})

</script>

<style scoped>
.right-table {
    padding: 12px 12px 6px 12px;
    --el-table-bg-color: rgba(0, 0, 0, 0.2);
    background-color: var(--el-table-bg-color);
    border-radius: 4px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
}

.righttop {
    margin-left: -12px;
    margin-right: -12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #545E72;
    padding-right: 12px;
}

.righttop {
    text-align: center;
}

.righttoptext {
    text-align: left;
}

.text-1 {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    font-family: 'FZZongYi-M05S';
    height: 32px;
    line-height: 32px;
}

.text-2 {
    line-height: 32px;
}

.colora {
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;

}




.colorb {
    background: linear-gradient(180deg, #FE8B16 0%, #F84228 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;
}

.colorc {
    background: linear-gradient(180deg, #FCF100 0%, #F5A300 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;

}

.texta {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    margin-left: 6px;

}

.righttopbody {
    padding-left: 12px;
}

.righttopbodyright {
    padding-right: 12px;
}

.righttopbody-1 {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.righttopbody-img {
    padding-top: 8px;
}
</style>